<template>
  <div class="register">
    <div class="content">
      <h4>新用户注册</h4>
      <p>很高兴您将成为商城的会员（注册只需一步）</p>
      <!-- 手机号码 -->
      <my-input
        placeholder="手机号码"
        v-model="form.mobile"
        @blur="mobileFtn"
        :class="reMobile == 0 ? '' : reMobile == 1 ? 'success' : 'error'"
      >
        <span class="err" v-if="reMobile == 2">必填</span>
        <i class="iconfont icon-shouji"></i>
      </my-input>

      <!-- 密码 -->
      <my-input
        placeholder="密码"
        :type="showPwd ? 'text' : 'password'"
        v-model="form.pwd"
        :class="rePwd == 0 ? '' : rePwd == 1 ? 'success' : 'error'"
        @blur="pwdFtn"
      >
        <van-icon :name="showPwd ? 'eye-o' : 'closed-eye'" @click="showPwd = !showPwd" />
      </my-input>
      <!-- 确认密码 -->
      <my-input placeholder="确认密码" type="password" v-model="pwdAgain">
        <van-icon :name="showPwd ? 'eye-o' : 'closed-eye'" @click="showPwd = !showPwd" />
      </my-input>
      <!-- 用户名 -->
      <my-input placeholder="用户名" v-model="form.nick">
        <van-icon name="user-o" />
      </my-input>
      <!-- 图形验证码 -->
      <my-input placeholder="图形验证码" v-model="imgCode">
        <img
          class="imgcode"
          :src="`https://api.it120.cc/small4/verification/pic/get?key=${key}`"
          alt=""
          @click="key = new Date().getTime()"
        />
      </my-input>
      <!-- 城市的选择 -->
      <my-input placeholder="城市选择" v-model="cityName" @click="show = true">
      </my-input>
      <!-- 短信验证码 -->
      <my-input placeholder="短信验证码" v-model="form.code">
        <button class="code" :disabled="disabled" @click="getCode">{{ btnMsg }}</button>
      </my-input>
      <button class="footBtn" @click="registerFtn">立即注册</button>
      <router-link custom to="/login" v-slot="{ navigate }">
        <p class="footA" @click="navigate">已有账号？立即登录</p>
      </router-link>
    </div>
    <van-action-sheet v-model:show="show" title="">
      <van-area
        title="城市的选择"
        columns-num="2"
        :area-list="areaList"
        @cancel="show = false"
        @confirm="confirm"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { ref, reactive, toRefs } from "vue";
import myInput from "../../components/myInput.vue";
import { Notify } from "vant";
import { useRouter } from "vue-router";
import { getCodes, register } from "../../api/second/index.js";
export default {
  components: { myInput },
  setup() {
    const { push } = useRouter();
    const data = reactive({
      form: {
        mobile: "", // 手机号
        pwd: "", // 密码
        nick: "", // 用户名
        province: "", // 省份的编码
        city: "", // 城市的编码
        code: "", // 短信验证码
      },
      key: "123", // 获取图片传入的key值
      reMobile: 0, // 0 代表没有触摸过，1 代表成功，2 代表失败
      rePwd: 0,
      showPwd: false,
      pwdAgain: "", // 确认密码的值
      imgCode: "", // 图形验证码
      cityName: "", // 城市的名字
      show: false, // 控制城市选择弹窗的显示隐藏
      disabled: false, // 控制按钮是否允许点击
      btnMsg: "获取验证码",
    });

    const mobileFtn = () => {
      // 手机号的验证
      let phre = /^1[3-9][0-9]{9}$/; // 手机号的正则
      data.reMobile = phre.test(data.form.mobile) ? 1 : 2;
    };

    const pwdFtn = () => {
      // 密码的验证函数
      data.rePwd = data.form.pwd ? 1 : 2;
    };
    const confirm = (val) => {
      // 城市选择的确定事件
      data.cityName = `${val[0].name}-${val[1].name}`;
      data.from.province = val[0].code;
      data.from.city = val[1].code;
      data.show = false;
    };

    const getCode = () => {
      // 获取短信验证码的函数
      let num = 60;
      let time = setInterval(() => {
        data.disabled = true;
        if (num <= 0) {
          clearInterval(time);
          data.disabled = false;
          data.btnMsg = "获取验证码";
        } else {
          num--;
          data.btnMsg = `${num}秒后获取`;
        }
      }, 1000);
      if (data.disabled) return;
      getCodes({ mobile: data.form.mobile, key: data.key, picCode: data.imgCode }).then(
        (res) => {
          console.log(res);
        }
      );
    };

    const registerFtn = () => {
      // 立即注册的函数
      register(data.form).then((res) => {
        push("/login");
      });
    };
    return {
      ...toRefs(data),
      mobileFtn,
      pwdFtn,
      areaList,
      confirm,
      getCode,
      registerFtn,
    };
  },
};
</script>
<style lang="scss" scoped>
.register {
  height: 100%;
  padding: 25px;
  box-sizing: border-box;
  .content {
    border: 1px solid #f5f5f5;
    padding: 10px 30px;
    box-sizing: border-box;
    h4 {
      margin-top: 30px;
    }
    p {
      margin: 50px 0 10px;
      font-size: 15px;
      color: #909090;
    }
  }
}
.van-icon {
  font-size: 16px;
}
.imgcode {
  width: 120px;
}
.code {
  border: none;
  color: #000;
  font-size: 12px;
}
.footBtn {
  font-size: 16px;
  width: 210px;
  height: 42px;
  border: none;
  background: linear-gradient(90deg, #5ea6f8, #bb87f6);
  border-radius: 5px;
  color: #fff;
  margin: 20px auto;
  display: block;
}
.footA {
  text-align: center;
  color: #549ff9 !important;
  margin-top: 10px !important;
}
.err {
  font-size: 12px;
  color: red;
  margin-right: 5px;
}
</style>
